<template>
	<view class="page" :style="{'height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="开发票"></c-nav-bar>
		<view class="top">
			<text class="t_title">开票金额</text>
			<view class="t_price"><span>￥</span>{{totalPrice.toFixed(2)}}</view>
		</view>
		<view class="tabs">
			<view :class="tabIndex===0?'active':''" @tap="tabIndex=0">企业</view>
			<view :class="tabIndex===1?'active':''" @tap="tabIndex=1">个人/非企业</view>
		</view>
		<view class="item select" @tap="selectFptt">
			<view class="text">选择发票抬头</view>
			<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
		</view>
		<view class="item">
			<view class="text">发票抬头<span style="color: red;">*</span></view>
			<input v-if="tabIndex===0" type="text" placeholder="请填写企业名称" v-model="companyDto.invoiceTitle" @blur="e=>setParams(e,'invoiceTitle',1)" @confirm="e=>setParams(e,'invoiceTitle',1)">
			<input v-if="tabIndex===1" type="text" placeholder="请填写个人名称" v-model="personDto.invoiceTitle" @blur="e=>setParams(e,'invoiceTitle',2)" @confirm="e=>setParams(e,'invoiceTitle',2)">
		</view>
		<template v-if="tabIndex===0">
			<view class="item i_bt">
				<view class="text">企业税号<span style="color: red;">*</span></view>
				<input type="text" placeholder="请填写纳税人识别号" v-model="companyDto.taxNumber" @blur="e=>setParams(e,'taxNumber',1)" @confirm="e=>setParams(e,'taxNumber',1)">
			</view>
			<view class="item i_bt">
				<view class="text">公司地址</view>
				<input type="text" placeholder="请填写公司地址" v-model="companyDto.unitAddress" @blur="e=>setParams(e,'unitAddress',1)" @confirm="e=>setParams(e,'unitAddress',1)">
			</view>
			<view class="item i_bt">
				<view class="text">公司电话</view>
				<input type="text" placeholder="请填写公司电话" v-model="companyDto.unitPhone" @blur="e=>setParams(e,'unitPhone',1)" @confirm="e=>setParams(e,'unitPhone',1)">
			</view>
			<view class="item i_bt">
				<view class="text">开户银行</view>
				<input type="text" placeholder="请填写开户银行" v-model="companyDto.depositBank" @blur="e=>setParams(e,'depositBank',1)" @confirm="e=>setParams(e,'depositBank',1)">
			</view>
			<view class="item i_bt">
				<view class="text">开户账号</view>
				<input type="text" placeholder="请填写开户账号" v-model="companyDto.bankAccount" @blur="e=>setParams(e,'bankAccount',1)" @confirm="e=>setParams(e,'bankAccount',1)">
			</view>
			<view class="item i_bt">
				<view class="text">手机号码</view>
				<input type="tel" placeholder="请填写手机号码" v-model="companyDto.guestPhone" @blur="e=>setParams(e,'guestPhone',1)" @confirm="e=>setParams(e,'guestPhone',1)">
			</view>
			<view class="item i_bt">
				<view class="text">邮箱地址</view>
				<input type="email" placeholder="请填写你的电子邮箱" v-model="companyDto.email" @blur="e=>setParams(e,'email',1)" @confirm="e=>setParams(e,'email',1)">
			</view>
		</template>
		<template v-else>
			<view class="item i_bt">
				<view class="text">手机号码</view>
				<input type="tel" placeholder="请填写手机号码" v-model="personDto.guestPhone" @blur="e=>setParams(e,'guestPhone',2)" @confirm="e=>setParams(e,'guestPhone',2)">
			</view>
			<view class="item i_bt">
				<view class="text">邮箱地址</view>
				<input type="email" placeholder="请填写你的电子邮箱" v-model="personDto.email" @blur="e=>setParams(e,'email',2)" @confirm="e=>setParams(e,'email',2)">
			</view>
		</template>
		<view class="bottom">
			<view class="btn" @tap="toSubmit">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 90,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				totalPrice:0,
				invoices:[],
				tabIndex:0,
				companyDto:{
					invoiceTitle:'',
					taxNumber:'',
					unitAddress:'',
					unitPhone:'',
					depositBank:'',
					bankAccount:'',
					guestPhone:'',
					email:''
				},
				personDto:{
					invoiceTitle:'',
					guestPhone:'',
					email:''
				},
				type:'',
				yjlItem:null,
				jdItem:null,
				fptt:null
			}
		},
		onLoad(option) {
			this.type = option.type;
			if(this.type==1){
				this.yjlItem = JSON.parse(option.item);
				this.totalPrice = parseFloat(this.yjlItem.totalPrice)||0;
			}else if(this.type==2){
				this.jdItem = JSON.parse(option.item);
				this.totalPrice = parseFloat(this.jdItem.realityPay)||0;
			}
		},
		methods: {
			selectFptt(){
				uni.navigateTo({
					url: '/pagesMy/invoice/regularLetterhead?type=' + (+this.tabIndex+1),
					events: {
						selectCallBack: data => {
							if(data) this.fptt = data;
							if(this.tabIndex===0){
								this.companyDto = {...this.fptt};
							}else{
								this.personDto = {...this.fptt};
							}
						}
					}
				})
			},
			setParams(e,key,type){
				if(type==1) this.companyDto[key] = e.target.value;
				else if(type==2) this.personDto[key] = e.target.value;
			},
			toSubmit(){
				//目前仅渔家乐可调接口开票
				if(this.type==1){
					if(this.tabIndex===0&&!this.companyDto.invoiceTitle) return this.$showToast('请填写企业名称');
					if(this.tabIndex===0&&!this.companyDto.taxNumber) return this.$showToast('请填写企业税号');
					if(this.tabIndex===1&&!this.personDto.invoiceTitle) return this.$showToast('请填写个人名称');
					if(this.companyDto.guestPhone&&!this.$reg.mobile(this.companyDto.guestPhone)) return this.$showToast('请填写正确的手机号码');
					if(this.companyDto.email&&!this.$reg.email(this.companyDto.email)) return this.$showToast('请填写正确的邮箱地址');
					if(this.personDto.guestPhone&&!this.$reg.mobile(this.personDto.guestPhone)) return this.$showToast('请填写正确的手机号码');
					if(this.personDto.email&&!this.$reg.email(this.personDto.email)) return this.$showToast('请填写正确的邮箱地址');
					
					//invoiceType:1门票 2酒店 3船票 4餐饮 5船+宿 6导游预订 7船+景 8宿+景 9:船票往返 10渔家乐 常量 OrderConstant 11智慧停车场 12小工市场 13海钓 
					//            14文化场馆 15婚姻登记 16旅拍 20 充值 22:出行规划船票订单
					let dto = {
						openId:JSON.parse(uni.getStorageSync('userInfo')).openId,
						email:this.tabIndex===0?this.companyDto.email:this.personDto.email,
						guestPhone:this.tabIndex===0?this.companyDto.guestPhone:this.personDto.guestPhone,
						invoiceName:this.type==1?this.yjlItem.goodsNameAndType:'',
						invoicePrice:this.totalPrice,
						invoiceTitle:this.tabIndex===0?this.companyDto.invoiceTitle:this.personDto.invoiceTitle,
						invoiceType:this.type==1?10:'',
						status:0,
						type:this.tabIndex,
						orderCode:this.yjlItem.orderCode
					}
					if(this.tabIndex===0){
						dto.bankAccount = this.companyDto.bankAccount;
						dto.depositBank = this.companyDto.depositBank;
						dto.taxNumber = this.companyDto.taxNumber;
						dto.unitAddress = this.companyDto.unitAddress;
						dto.unitPhone = this.companyDto.unitPhone;
					}
					
					this.$api.post('/api/isinvoice',dto).then(res=>{
						if(res.data.code===0){
							uni.navigateTo({
								url:'/pagesMy/invoice/invoiceResult'
							})
						}else this.$showModal(res.data.msg);
					})
				}else this.$showToast('暂不可开票')
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F5F8FA;
		overflow-y: auto;
		box-sizing: border-box;
		padding-bottom: 20rpx;
		
		.top{
			width: calc(100% - 48rpx);
			margin: 20rpx 24rpx 48rpx;
			background: #007A69;
			border-radius: 23rpx;
			padding: 36rpx 24rpx 40rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.t_title{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				position: relative;
			}
			.t_price{
				font-size: 60rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				margin-top: 16rpx;
				line-height: 84rpx;
				span{
					font-size: 36rpx;
				}
				position: relative;
			}
			.t_kpf{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				position: relative;
			}
		}
		
		.tabs{
			display: flex;
			align-items: center;
			padding: 0 18rpx 24rpx;
			&>view{
				padding: 0 30rpx 6rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #BCBCBC;
				position: relative;
				&.active{
					font-weight: bold;
					color: #333333;
					&::after{
						content: '';
						width: 62rpx;
						height: 4rpx;
						background: #007A69;
						position: absolute;
						bottom: -6rpx;
						left: 50%;
						margin-left: -31rpx;
					}
				}
			}
		}
		
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 24rpx;
			background: #fff;
			box-sizing: border-box;
			&.select{
				padding: 43rpx 24rpx;
				margin-bottom: 20rpx;
				image{
					width: 30rpx;
					height: 30rpx;
				}
				.text{
					width: auto;
				}
			}
			&.i_bt{
				border-top: 1rpx solid rgba(112, 112, 112, .1);
			}
			.text{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				width: 150rpx;
			}
			input{
				width: calc(100% - 150rpx);
				border: none;
				outline: none;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				text-align: right;
				&::placeholder{
					color: #AAAAAA;
				}
			}
			view{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #AAAAAA;
			}
		}
		
		.tip{
			width: 100%;
			padding: 27rpx 24rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #AAAAAA;
		}
		
		.set{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 27rpx 46rpx 29rpx 24rpx;
			box-sizing: border-box;
			background: #fff;
			.s_left{
				display: flex;
				flex-direction: column;
				text{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					&:last-child{
						font-size: 24rpx;
						color: #AAAAAA;
						margin-top: 11rpx;
					}
				}
			}
			.s_right{
				width: 89rpx;
				height: 54rpx;
			}
		}
		
		.bottom{
			width: 100%;
			height: 180rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 1;
			background: #fff;
			box-shadow: 0rpx -1rpx 4rpx rgba(0,0,0,0.06);
			.btn{
				width: calc(100% - 60rpx);
				height: 88rpx;
				background: #007A69;
				border-radius: 50rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				letter-spacing: 2rpx;
				margin: 39rpx 30rpx 0;
			}
		}
	
		.confirm_info{
			.ci_title{
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				text-align: center;
				margin: 40rpx 0 5rpx;
			}
			.ci_item{
				margin-top: 36rpx;
				padding: 0 48rpx;
				display: flex;
				flex-direction: column;
				text{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #9A9A9A;
					&:last-child{
						color: #333333;
						margin-top: 7rpx;
					}
				}
			}
			.ci_tip{
				width: 100%;
				padding: 28rpx 48rpx 53rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #AAAAAA;
				box-sizing: border-box;
			}
			.ci_btns{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 1rpx solid rgba(112, 112, 112, .1);
				&>view{
					width: calc(50% - 0.5rpx);
					height: 110rpx;
					line-height: 110rpx;
					text-align: center;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #007A69;
					letter-spacing: 2rpx;
					&:first-child{
						border-right: 0.5rpx solid rgba(112, 112, 112, .1);
					}
					&:last-child{
						border-left: 0.5rpx solid rgba(112, 112, 112, .1);
					}
				}
			}
		}
		
		/deep/.u-popup__content{
			width: calc(100% - 90rpx);
			border-radius: 16rpx;
		}
	}
</style>